<template>
  <view class="brand" v-if="home.brand && home.brand.length > 0">
    <view class="item" v-for="item in home.brand" :key="item.id">
      <view class="top" @click="goMore(item)">
        <v-image :url="item.image.path" v-if="item.image" :width="'120rpx'" :height="'120rpx'" />
        <view class="desc">
          <view class="title">{{item.name}}</view>
          <view class="tag" v-if="item.tag">{{item.tag}}</view>
        </view>
      </view>
      <view class="product">
        <view class="item" v-for="o in item.product" @click="goProduct(o)" :key="o.id">
          <v-image :url="o.mainImage.path" v-if="o.mainImage" :width="'180rpx'" />
          <view class="desc">
            <view class="title two-lines">{{ o.title }}</view>
            <view class="title_sub one-lines" v-if="o.title_sub">{{ o.title_sub }}</view>
            <v-price :product="o" class="price" />
          </view>
        </view>
      </view>
      <view class="more" @click="goMore(item)">
        <view class="text">查看更多</view>
      </view>
    </view>
    <view class="show-brand" @click="goAllBrand">更多品牌</view>
  </view>
</template>

<script>

import Image from '../../../../components/image/index'
import Price from '../../../../components/price/index'

export default {
  props: ['home'],
  components: {
    'v-image': Image,
    'v-price': Price,
  },
  filters: {
    tag(v) {

    }
  },
  data() {
    return {
    }
  },
  methods: {
    goProduct(item) {
      uni.navigateTo({
        url: `/sub_product/detail/index?id=${item.id}`
      })
    },
    goAllBrand() {
      uni.navigateTo({
        url: '/sub_product/brand/index'
      })
    },
    goMore(item) {
      uni.navigateTo({
        url: `/sub_product/brand/product?id=${item.id}`
      })
    }
  },
  created() {
  },
  mounted() {
  },

}
</script>

<style scoped lang="scss">
.brand {
  margin: 0 20rpx;
  .item {
    margin-bottom: 20rpx;
    background: white;
    padding: 20rpx;
    border-radius: 10rpx;
    display: flex;
    flex-direction: column;
    .more {
      display: flex;
      justify-content: flex-end;
      .text {
        display: inline-block;
        background: $main_color;
        color: white;
        padding: 10rpx 20rpx;
        border-radius: 10rpx;
        font-size: 24rpx;
      }
    }
    .top {
      display: flex;
      .desc {
        padding-left: 20rpx;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .title {
          font-weight: 700;
          font-size: 30rpx;
          margin-bottom: 20rpx;
        }
        .tag {
          color: $main_color;
          font-size: 24rpx;
        }
      }
    }
    .product {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      .item {
        border-radius: 10rpx;
        display: flex;
        .desc {
          .title {
            line-height: 1.35em;
            color: #4b4b4b;
            margin: 20rpx 0 10rpx 0;
            font-size: 24rpx;
            text-align: left;
          }
          .title_sub {
            color: #bbbbbb;
            font-size: 24rpx;
            text-align: left;
          }
        }
      }
    }

  }
}
.show-brand {
  margin: 20rpx 0;
  padding: 20rpx;
  background: white;
  font-size: 24rpx;
  color: #959595;
  text-align: center;
  border-radius: 10rpx;
}
</style>
